<!-- 库存管理 -->
<template>
    <div class="temperature">
        <div class="detailList">
            <div class="detail">
                <div class="d_1">
                    <img class="flashing-image" v-if="true" src="@/assets/images/digitalProduction/warning.png" alt="">
                </div>
                <div class="d_2">
                    负压
                    <span>52.32</span>
                    <span>Pa</span>
                </div>
                <img v-if="true" @click="toggle" class="d_3" src="@/assets/images/digitalProduction/set.png" alt="">
            </div>
            <div class="detail">
                <div class="d_1">
                    <img class="flashing-image" v-if="false" src="@/assets/images/digitalProduction/warning.png" alt="">
                </div>
                <div class="d_2">
                    温度
                    <span>22.6</span>
                    <span>°C</span>
                </div>
                <img v-if="false" class="d_3" src="@/assets/images/digitalProduction/set.png" alt="">
            </div>
            <div class="detail">
                <img class="d_1 hidden-image" src="@/assets/images/digitalProduction/warning.png" alt="">
                <div class="d_2">
                    今日剩余库存
                    <span>62.6</span>
                    <span>t</span>
                </div>
                <!-- <img class="d_3 hidden-image" src="@/assets/images/digitalProduction/set.png" alt=""> -->
            </div>
        </div>
        <div class="popup" v-if="isVisible">
            <div class="title">
                <img src="@/assets/images/digitalProduction/titleIcon.png" alt="">
                <span>操作指引</span>
            </div>
            <div class="popupContent">
                <div class="paragraph_1">垃圾仓负压值过高(正常范围 0 ~ 50 Pa)</div>
                <div class="paragraph_2">
                    <div class="point"></div>
                    <span>可能原因:</span>
                </div>
                <div class="paragraph_3">风机电机的出力异常，风管堵塞<br /></div>
                <div class="paragraph_2">
                    <div class="point"></div>
                    <span>处理方法:</span>
                </div>
                <div class="paragraph_3">1、当负压无法维持时可开启卸料门空气幕隔断气流</div>
                <div class="paragraph_3">2、通过plc控制风机转速</div>
            </div>
        </div>
        <div>

        </div>
    </div>
</template>

<script setup lang="ts">

const isVisible = ref(false);

const toggle = () => {
    isVisible.value = !isVisible.value;
}

</script>

<style lang="scss" scoped>
.temperature {
    display: flex;
    position: absolute;
    width: vh(524);
    height: vh(160);
    left: vh(528);
    top: vh(115);
    // background: url(@/assets/images/home/left2.png) no-repeat;
    // background-size: 100% 100%;
    z-index: 999;

    .detailList {
        width: vh(204);
        height: vh(109);
        border: vh(1) solid #00B1E1;
        background: rgba(0,25,35,0.7);

        .detail {
            display: flex;
            align-items: center;
            margin-top: vh(6);
            margin-left: vh(9);

            .d_1 {
                width: vh(15);
                margin-right: vh(7);

                img {
                    width: vh(15);
                    height: vh(15);
                }
            }

            .d_2 {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(13);
                color: #FFFFFF;
                margin-right: vh(13);

                display: flex;
                align-items: baseline;

                span:nth-of-type(1) {
                    font-family: DIN;
                    font-weight: bold;
                    font-size: vh(18);
                    color: #FFB03A;
                    margin-right: vh(8);
                    margin-left: vh(10);
                }

                span:nth-of-type(2) {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(13);
                    color: #FFB03A;
                }
            }

            .d_3 {
                width: vh(18);
                height: vh(18);
                cursor: pointer;
            }
        }

        @keyframes flash {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .flashing-image {
            animation: flash 1s infinite;
        }
    }

    .popup {
        width: vh(313);
        height: vh(160);
        background: url(@/assets/images/digitalProduction/popup.png) no-repeat;
        background-size: 100% 100%;
        z-index: 999;
        margin-left: vh(7);
        padding-left: vh(21);
        padding-top: vh(9);

        .title {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: vh(14);
            color: #00CCFF;
            display: flex;
            align-items: center;
            line-height: vh(28);

            img {
                width: vh(10);
                height: vh(12);
            }

            span {
                margin-left: vh(8);
            }
        }

        .popupContent {
            .paragraph_1 {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: vh(12);
                color: #00E3FF;
            }

            .paragraph_2 {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #00E3FF;
                display: flex;
                align-items: center;
            }

            .point {
                background-color: rgba(0, 227, 255, 1);
                width: vh(4);
                height: vh(4);
                margin-right: vh(6);
            }

            .paragraph_3 {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #FFFFFF;
            }
        }
    }

    .hidden-image {
        opacity: 0;
        /* 使图片完全透明，但占位 */
    }
}
</style>
